<template>
    <div class="header">
        <el-tabs v-model="activeValue">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <keep-alive>
                    <!-- @cell-click="handleCellClick" -->
                    <component :is="item.content" :activeValue="activeValue" :ref="item.name"></component>
                </keep-alive>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import FundCheck from './fund-ledger-manage/fund-check.vue';
import FundInfo from './fund-ledger-manage/fund-info.vue';
import SameDayReverse from './fund-ledger-manage/same-day-reverse.vue';
@Component({ name: 'FundLedgerManage', components: { FundInfo, FundCheck, SameDayReverse } })
export default class FundLedgerManage extends Vue {
    activeValue: string = 'fund-info';
    panes: any[] = [
        {
            label: '产品信息',
            name: 'fund-info',
            content: 'FundInfo',
        },
        {
            label: '产品校验',
            name: 'fund-check',
            content: 'FundCheck',
        },
        {
            label: '同日反向',
            name: 'same-day-reverse',
            content: 'SameDayReverse',
        },
    ];

    mounted() {
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    // 复核点击名称->产品信息查询
    // handleCellClick(code) {
    //     console.log(code, 'code');
    //     this.activeValue = 'fund-info';
    //     this.$nextTick(() => {
    //         console.log(this.$refs, (this.$refs as any)['fund-info']);
    //         (this.$refs as any)['fund-info'][0].getTableData(code);
    //     });
    // }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';
.header {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        border: none;
        // .is-active {
        //     border-color: #409eff;
        //     border-bottom: 2px solid #409eff;
        // }
    }
    .el-tabs__content {
        // padding: 10px;
        padding-top: 10px;
        height: 100%;
        overflow: auto;
        background-color: #f2f3f5;
        .el-tab-pane {
            color: #333;
            height: 100%;
        }
    }
}
/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}
/deep/ .el-card__body {
    padding: 8px !important;
}
</style>
